<template>
    <div :class="classes" :style="styles"><slot></slot></div>
</template>

<script>
    export default {
        name: "CCol",
        props: {
            span: [Number, String],
            offset: [Number, String]
        },
        data() {
            return {};
        },
        computed: {
            classes() {
                return ['c-col', {
                    [`c-col-${this.span}`]: this.span > 0 && this.span <= 24,
                    [`c-col-offset-${this.offset}`]: this.offset > 0 && this.offset <= 24,
                }];
            },
            styles() {
                let gutter = this.$parent.gutter;
                if (gutter > 0) {
                    return {
                        paddingLeft: this.gutter / 2 + 'px',
                        paddingRight: this.gutter / 2 + 'px',
                    };
                }
                return {};
            }
        },
        methods: {}
    };
</script>

<style lang="less">
    .c-col {
        display: block;
        float: left;
        box-sizing: border-box;
    }
    .col(@idx) when(@idx > 0) {
        .c-col-@{idx} {
            width: percentage(@idx / 24);
        }
        .col(@idx - 1);
    }
    .col(24);
</style>
